<template>
  <div class="top">
    <div class="top-location">>>{{ location }}</div>
    <div class="top-user">
      <top-drop></top-drop>
    </div>
  </div>
</template>

<script>
import EventBus from '../../../bus/bus'
import TopDrop from './TopDrop'

export default {
  name: 'TopMenu',
  components: { TopDrop },
  data () {
    return {
      location: '我的桌面'
    }
  },
  mounted () {
    var _this = this
    EventBus.$on('change-location', function (msg) {
      _this.location = msg
      console.log(_this.location)
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.top {
  background: $bgColor;
  color: $fontColor;
  font-size: $fontSize;
  width: 100%;
  height: 1rem;

  .top-location {
    float: left;
    margin: 0.3rem;
    margin-left: 0.4rem;
    font-weight: bold;
    font-size: 0.35rem;
  }

  .top-user {
    float: right;
    margin: 0.3rem;
    margin-right: 0.4rem;
  }
}
</style>
